<template>
    <CrudPage
        :model="formData"
        :columns="columns"
        :initialFormData="initialFormData"
        v-model:formData="formData"
        :getApi="getGoodsTypeAttributeApi"
        :updateApi="updateGoodsTypeAttributeApi"
        :deleteApi="deleteGoodsTypeAttributeApi"
        :createApi="createGoodsTypeAttributeApi"
        deleteMessageKey="title"
    >
        <template #form>
            <AFormItem label="所属商品类型" name="goods_type_id">
                <ASelect v-model:value="formData.goods_type_id._id">
                    <ASelectOption v-for="(item, index) in goodsTypeList" :key="index" :value="item._id">{{ item.title }}</ASelectOption>
                </ASelect>
            </AFormItem>
            <AFormItem label="属性名" name="title">
                <AInput v-model:value="formData.title" />
            </AFormItem>
            <AFormItem label="属性类型" name="attr_type">
                <ASelect v-model:value="formData.attr_type">
                    <ASelectOption value="input">单行文本框</ASelectOption>
                    <ASelectOption value="textarea">多行文本框</ASelectOption>
                    <ASelectOption value="select">下拉选择框</ASelectOption>
                </ASelect>
            </AFormItem>
            <AFormItem label="属性值" name="attr_value">
                <ATextarea v-model:value="formData.attr_value" />
            </AFormItem>
            <AFormItem label="状态" name="status">
                <ASwitch v-model:checked="formData.status" checkedChildren="可用" unCheckedChildren="不可用" :checkedValue="1" :unCheckedValue="0" />
            </AFormItem>
        </template>
    </CrudPage>
</template>

<script>
import { computed, defineComponent, reactive, toRefs } from "vue";
import CrudPage from "@/components/CrudPage.vue";
import { getGoodsTypeAttributeApi, createGoodsTypeAttributeApi, deleteGoodsTypeAttributeApi, updateGoodsTypeAttributeApi, getGoodsTypeApi } from "@/api/goods";
import { useRoute } from "vue-router";
import config from "@/config";
export default defineComponent({
    components: {
        CrudPage,
    },
    setup() {
        const initialFormData = {
            goods_type_id: { _id: "" },
            title: "",
            attr_type: "",
            attr_value: "",
            status: 1,
        };
        const state = reactive({
            columns: [
                {
                    dataIndex: "_id",
                    title: "ID",
                    width: 1,
                },
                {
                    dataIndex: "title",
                    title: "属性名",
                    width: 1,
                },
                {
                    dataIndex: "goods_type_id",
                    title: "所属商品类型",
                    width: 1,
                    customRender: ({ text }) => text && text.title,
                },
                {
                    dataIndex: "attr_type",
                    title: "属性类型",
                    width: 1,
                },
                {
                    dataIndex: "attr_value",
                    title: "属性值",
                    width: 1,
                },
                {
                    dataIndex: "status",
                    title: "状态",
                    width: 1,
                    customRender: ({ text }) => (text ? "可用" : "不可用"),
                },
                {
                    dataIndex: "updatedTime",
                    title: "更新时间",
                    width: 1,
                    customRender: ({ text }) => text && new Date(text).toLocaleString(),
                },
                {
                    title: "操作",
                    width: 1,
                    dataIndex: "operation",
                    fixed: "right",
                },
            ],
            formData: { ...initialFormData },
            goodsTypeList: [],
        });
        const getGoodsType = () => {
            getGoodsTypeApi().then(res => {
                if (res.code === 200) {
                    state.goodsTypeList = res.data;
                }
            });
        };
        getGoodsType();
        const route = useRoute();
        const queryConditions = computed(() => {
            const goods_type_id = route.query.goods_type_id;
            if (config.testObjectId(goods_type_id)) {
                return { goods_type_id };
            } else {
                return {};
            }
        });
        return {
            ...toRefs(state),
            initialFormData,
            getGoodsTypeAttributeApi: () => getGoodsTypeAttributeApi(queryConditions.value),
            createGoodsTypeAttributeApi,
            deleteGoodsTypeAttributeApi,
            updateGoodsTypeAttributeApi,
        };
    },
});
</script>

<style scoped lang="scss"></style>
